<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>导航栏——利用:before伪类来做悬浮菜单项时的border-top</title>
    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./menu.css">
    <link rel="stylesheet" href="./theme.css">
</head>


<body>
    <div class="container">
        <nav>
            <ul class="menu">
                <li class="menu-item active">
                    <a href="#">
                        <i class="fa fa-home"></i>
                        首页
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        <i class="fa fa-heart-o"></i>
                        捐赠
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        <i class="fa fa-line-chart"></i>
                        统计图标
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        <i class="fa fa-shopping-cart"></i>
                        购物车
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        更多<i class="more"></i>
                    </a>
                    <ul class="submenu">
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-question-circle-o"></i>
                                提问
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-star-o"></i>
                                收藏
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-cog"></i>
                                设置
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-arrows-alt"></i>
                                全屏显示
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-sign-out"></i>
                                退出
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>

        <nav class="lime">
            <ul class="menu">
                <li class="menu-item active">
                    <a href="#">
                        <i class="fa fa-home"></i>
                        首页
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        <i class="fa fa-heart-o"></i>
                        捐赠
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        <i class="fa fa-line-chart"></i>
                        统计图标
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        <i class="fa fa-shopping-cart"></i>
                        购物车
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        更多<i class="more"></i>
                    </a>
                    <ul class="submenu">
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-question-circle-o"></i>
                                提问
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-star-o"></i>
                                收藏
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-cog"></i>
                                设置
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-arrows-alt"></i>
                                全屏显示
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-sign-out"></i>
                                退出
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>

        <nav class="red">
            <ul class="menu">
                <li class="menu-item active">
                    <a href="#">
                        <i class="fa fa-home"></i>
                        首页
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        <i class="fa fa-heart-o"></i>
                        捐赠
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        <i class="fa fa-line-chart"></i>
                        统计图标
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        <i class="fa fa-shopping-cart"></i>
                        购物车
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        更多<i class="more"></i>
                    </a>
                    <ul class="submenu">
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-question-circle-o"></i>
                                提问
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-star-o"></i>
                                收藏
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-cog"></i>
                                设置
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-arrows-alt"></i>
                                全屏显示
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-sign-out"></i>
                                退出
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>

        <nav class="gold">
            <ul class="menu">
                <li class="menu-item active">
                    <a href="#">
                        <i class="fa fa-home"></i>
                        首页
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        <i class="fa fa-heart-o"></i>
                        捐赠
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        <i class="fa fa-line-chart"></i>
                        统计图标
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        <i class="fa fa-shopping-cart"></i>
                        购物车
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        更多<i class="more"></i>
                    </a>
                    <ul class="submenu">
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-question-circle-o"></i>
                                提问
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-star-o"></i>
                                收藏
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-cog"></i>
                                设置
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-arrows-alt"></i>
                                全屏显示
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-sign-out"></i>
                                退出
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>

        <nav class="cyan">
            <ul class="menu">
                <li class="menu-item active">
                    <a href="#">
                        <i class="fa fa-home"></i>
                        首页
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        <i class="fa fa-heart-o"></i>
                        捐赠
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        <i class="fa fa-line-chart"></i>
                        统计图标
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        <i class="fa fa-shopping-cart"></i>
                        购物车
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        更多<i class="more"></i>
                    </a>
                    <ul class="submenu">
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-question-circle-o"></i>
                                提问
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-star-o"></i>
                                收藏
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-cog"></i>
                                设置
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-arrows-alt"></i>
                                全屏显示
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="">
                                <i class="fa fa-sign-out"></i>
                                退出
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</body>

</html>